<script lang="ts">
export default {
    name: 'brainTab'
};
</script>

<script setup lang="ts">
import Sea from './components/sea.vue'
import Man from './components/man.vue'
import Island from './components/island.vue'
import Rainbow from './components/rainbow.vue'

const tabList = [
    {
        label: '海上大冒险',
        component: Sea,
    },
    {
        label: '果冻人',
        component: Man,
    },
    {
        label: '孤岛大冒险',
        component: Island,
    },
    {
        label: '彩虹边消除',
        component: Rainbow,
    },
]

const tabIndex = ref(0)

onMounted(async () => {

});
</script>

<template>
    <div class="numberTab">
        <VTab v-model="tabIndex" :tabsData="tabList">
            <component :is="tabList[tabIndex].component"></component>
        </VTab>
    </div>
</template>
<style lang="scss" scoped>
.botton-box {
    padding: 20px 0;
}

.title-box {
    padding-top: 20px;
}

.title-botton {
    min-width: 120px;
    height: 36px;
    line-height: 36px;
}
</style>